<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
    <title>后台教师注册页面</title>
    <link href="css/bootstrap.min.css"  rel="stylesheet" th:href="@{/static/css/bootstrap.min.css}">
    <!-- 1.上传控件-->
    <link th:href="@{/static/js/plugins/fileinput/css/fileinput.css}" media="all" rel="stylesheet" type="text/css" />
    <link rel="stylesheet" th:href="@{/static/css/materialdesignicons.min.css}">
    <link rel="stylesheet" th:href="@{/static/css/style.min.css}">
    <!-- 2.对话框-->
    <link rel="stylesheet" th:href="@{/static/js/jconfirm/jquery-confirm.min.css}">
    <!-- 3.引入表单验证器-->
    <link rel="stylesheet" th:href="@{/static/js/plugins/validator/css/bootstrapValidator.css}" />
    <style>
        .coder-wrapper {
            position: relative;
        }
        .coder-login {
            display: flex !important;
            min-height: 100vh;
            align-items: center !important;
            justify-content: center !important;
        }
        .login-center {
            background: #fff;
            min-width: 38.25rem;
            padding: 2.14286em 3.57143em;
            border-radius: 5px;
            margin: 2.85714em 0;
        }
        .login-header {
            margin-bottom: 1.5rem !important;
        }
        .login-center .has-feedback.feedback-left .form-control {
            padding-left: 38px;
            padding-right: 12px;
        }
        .login-center .has-feedback.feedback-left .form-control-feedback {
            left: 0;
            right: auto;
            width: 38px;
            height: 38px;
            line-height: 38px;
            z-index: 4;
            color: #dcdcdc;
        }
        .login-center .has-feedback.feedback-left.row .form-control-feedback {
            left: 15px;
        }
    </style>
</head>

<body>
<div class="row coder-wrapper">
    <div class="coder-login">
        <div class="login-center">
            <div class="login-header text-center">
                <a href="../index.html"><span style="font-size:36px;color:black">在线考试系统注册页</span></a>
            </div>
            <!-- id="teacherRegForm"     id="file-pic"     data-method='regSaveTeacher'-->
            <form id="teacherRegForm" method="post" enctype="multipart/form-data">
                <div class="modal-body">
                    <div class="form-group">
                        <label for="recipient-username" class="control-label">老师名称：</label>
                        <input type="text" class="form-control" name="username" id="recipient-username">
                    </div>
                    <div class="form-group">
                        <label for="recipient-email" class="control-label">邮箱：</label>
                        <input type="text" class="form-control" name="email" id="recipient-email">
                    </div>
                    <div class="form-group">
                        <label for="recipient-tel" class="control-label">电话号码：</label>
                        <input type="text" class="form-control" name="tel" id="recipient-tel">
                    </div>

                    <div class="form-group">
                        <label for="recipient-password" class="control-label">密码：</label>
                        <input type="password" class="form-control" name="password" id="recipient-password">
                    </div>
                    <div class="form-group">
                        <label  class="control-label">性别:</label>
                        <div class="clearfix">
                            <label class="coder-radio radio-inline radio-primary">
                                <input type="radio"  name="sex" value="0"><span>女</span>
                            </label>
                            <label class="coder-radio radio-inline radio-primary">
                                <input type="radio" name="sex" value="1" checked><span>男</span>
                            </label>
                        </div>
                    </div>

                    <!-- 头像上传-->
                    <div class="form-group">
                        <input id="file-pic" name="file" type="file" value="上传" multiple/>
                        <p class="help-block">支持jpg、jpeg、png、gif,txt,"docx","zip","xlsx"格式，大小没限制</p>
                    </div>

                </div>
                <div class="modal-footer row">
                    <div class="col-lg-12">
                        <button type="button" data-method='regSaveTeacher' class="btn btn-primary">提交保存</button>
                        <button type="button" data-method='toLogin' class="btn btn-primary">返回登录</button>
                    </div>
                </div>
            </form>
            <hr>

        </div>
    </div>
</div>
<script type="text/javascript" src="js/jquery.min.js" th:src="@{/static/js/jquery.min.js}"></script>
<script type="text/javascript" src="js/bootstrap.min.js" th:src="@{/static/js/bootstrap.min.js}"></script>
<!-- 上传控件-->
<script type="text/javascript"  th:src="@{/static/js/plugins/fileinput/js/fileinput.js}"></script>
<script type="text/javascript"  th:src="@{/static/js/plugins/fileinput/js/locales/zh.js}"></script>

<script type="text/javascript"  th:src="@{/static/js/jquery.serialize-object.min.js}"></script>
<script type="text/javascript"  th:src="@{/static/js/jconfirm/jquery-confirm.min.js}"></script>
<script type="text/javascript"  th:src="@{/static/js/plugins/validator/js/bootstrapValidator.js}"></script>

<script type="text/javascript">

    $(function(){
        var userId ;
        $("button,a").on('click',function(){
            //获取到 a标签里面配置 data-method
            var methodName = $(this).data('method');
            if(methodName){
                doMethod[methodName]();
            }
        });
        var doMethod = {
            toLogin: function () {
                window.location.href="/toLogin";
            },
            regSaveTeacher:function(){
                //1 保存代码
                //(1)获取验证框，看一下是否验证通过 看一下是否验证通过（即填写信息是否符合要求的规定，如密码不能少于多少位）
                var bootstrapValidator = $('#teacherRegForm').data('bootstrapValidator');
                bootstrapValidator.validate();
                if(bootstrapValidator.isValid()){
                    //(2)如果通过 发送ajax到后台数据(先获取到数据再发送)
                    let formParamObj = $('#teacherRegForm').serializeObject();
                    $.ajax({
                        url:'/teacher/regTeacher',//前台和后台数据发送和返回的路径
                        type:'POST',
                        data:formParamObj,
                        success:function(data){
                            //获取保存功能的用户id
                            if(data.isSuccess){
                                userId = data.userid; //(0)获取保存功能的用户id,这个用户id是用来 上传图片,头像用的  变量保存userId;
                                //2 触发上传  头像上传 id="file-pic"
                                if($('#file-pic').val() != null){//(1)不为空，即上传框有值
                                    $('#file-pic').fileinput('upload');//（2）触发fileinput('upload')上传方法 参数
                                }

                            }
                        }
                    })

                }

            }
        }

        //上传图片 --定义上传框 进入fileinput方法   （这些是框架模板 ）
        //上传
        $('#file-pic').fileinput({ //(3)fileinput方法
            //初始化上传文件框
            language: "zh",//配置语言
            showUpload : false, //显示整体上传的按钮
            showRemove : true,//显示整体删除的按钮
            uploadAsync: true,//默认异步上传
            uploadLabel: "上传",//设置整体上传按钮的汉字
            removeLabel: "移除",//设置整体删除按钮的汉字
            uploadClass: "btn btn-primary",//设置上传按钮样式
            showCaption: true,//是否显示标题
            dropZoneEnabled: false,//是否显示拖拽区域
            uploadUrl: '/file/uploadFile',//这个是配置上传调取的后台地址，本项目是SSM搭建的 （4）提交的后台路经 uploadFile方法（FileController类）
            maxFileSize : 9999,//文件大小限制
            maxFileCount: 9999,//允许最大上传数，可以多个，
            enctype: 'multipart/form-data',
            allowedFileExtensions : ["jpg", "png","gif","docx","zip","xlsx","txt"],/*上传文件格式限制*/
            msgFilesTooMany: "选择上传的文件数量({n}) 超过允许的最大数值{m}！",
            showBrowse: true,
            browseOnZoneClick: true,
            slugCallback : function(filename) {
                return filename.replace('(', '_').replace(']', '_');
            },
            //(5)把参数userId提交到后台，后台接收（即根据路径 uploadUrl: '/file/uploadFile' 找到FileController类的uploadFile方法 把参数userId传过去 ）
            uploadExtraData: function(previewId, index) {   //额外参数的关键点
                //{ id: userId } //后台根据返回的userId 更新头像
                return { id: userId };
            }
        });
        //(6) 进入FileController类的uploadFile方法后  即上传完之后 根据后台返回响应信息data进行判断
        $('#file-pic').on("fileuploaded", function(event, data, previewId, index) {
            var response = data.response;
            console.log(response);
            //(7)根据返回的响应信息进行相应的判断处理
            if(response.isSuccess){
                $.confirm({//上传成功
                    title: '温馨提示',
                    content: '保存成功',
                    type: 'green',
                    buttons: {
                        omg: {
                            text: '谢谢',
                            btnClass: 'btn-green',
                        }
                    }
                });
            }else{
                //不上传图片时，不触发bootstrap 上传插件的初始化方法。仅将表单里面的（除图片以外的）内容提交到数据库
                $.confirm({//上传失败
                    title: '温馨提示',
                    content: '操作失败',
                    type: 'red',
                    buttons: {
                        omg: {
                            text: '重试',
                            btnClass: 'btn-red',
                        }
                    }
                });
            }
        });

        //***************************注册表单验证（看输入的信息合不合法）start*********************
        $('#teacherRegForm').bootstrapValidator({
            live: 'enabled',//字段值有变化就触发验证 disabled,submitted 当点击提交时验证并展示错误信息
            message: '信息不合法',
            feedbackIcons: {
                valid: 'glyphicon glyphicon-ok',
                invalid: 'glyphicon glyphicon-remove',
                validating: 'glyphicon glyphicon-refresh'
            },
            fields: {
                username: {
                    message: '用户名不合法',
                    validators: {
                        notEmpty: {
                            message: '用户名必须填写,不能为空'
                        },
                        stringLength: {
                            min: 6,
                            max: 30,
                            message: '长度必须是6到30个字符'
                        },
                        // regexp: {
                        //   regexp: /^[a-zA-Z0-9_\.]+$/,
                        //   message: '用户名必须有字母数字下划线组成'
                        // }
                    }
                },
                tel: {
                    message: '电话不合法',
                    validators: {
                        notEmpty: {
                            message: '电话号码,不能为空'
                        },
                        stringLength: {
                            min: 11,
                            max: 11,
                            message: '长度必须是11位'
                        },
                        regexp: {
                            regexp: /^1\d{10}$/,
                            message: '手机号格式错误'
                        }
                    }
                },
                email: {
                    validators: {
                        notEmpty: {
                            message: '邮箱不能空'
                        },
                        emailAddress: {
                            message: '输入邮箱不合格'
                        }
                    }
                },
                password: {
                    validators: {
                        notEmpty: {
                            message: '密码不能为空'
                        },
                        stringLength: {
                            min: 6,
                            max: 9,
                            message: '密码长度6到9位'
                        }
                    }
                }
            }
        });
        //***************************注册表单验证end*********************
    });
</script>
</body>
</html>